<template>
    <header>
        <i v-if="isCollapsed" class="el-icon-d-arrow-right" @click="setCollapse(false)"></i>
        <i v-if="!isCollapsed" class="el-icon-d-arrow-left" @click="setCollapse(true)"></i>
        <el-dropdown class="drop" @command="handleCommand">
              <span class="el-dropdown-link">
               <i class="el-icon-setting el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logOut"><span @click="logOut">Log Out</span> </el-dropdown-item>
                    <el-dropdown-item>Forget Password</el-dropdown-item>
                </el-dropdown-menu>
        </el-dropdown>
    </header>
</template>


<script>
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        computed: {
            ...mapGetters(['isCollapsed'])
        },
        methods: {
            setCollapse(f) {
                this.setIsCollapsed(f)
            },
            handleCommand(command){
                switch (command){
                    case 'logOut':
                        this.logOut();
                        break
                }
            },
            logOut(){
                this.$router.push('/')
            },
            ...mapMutations(['setIsCollapsed'])
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/variable";
    header {
        height: 60px;
        line-height: 60px;
        width: 100%;
        font-size: $text-font;
        background: $bg-theme;
        color: #fff;
        i {
            float: left;
            font-size: 20px;
            line-height: 60px;
            margin-left: 30px;
            cursor: pointer;
        }
        .drop{
            float: right;
            margin-right: 30px;
            color: #fff;
        }
    }
</style>